<template>
  <view class="pl15px pr15px">
    <view class="mt15px">
      <Card title="上传照片" subTitle="拍照片">
        <van-uploader
          accept="media"
          capture="['picture']"
          :fileList="fileList"
          use-before-read
          @beforeRead="beforeRead"
          @afterRead="afterRead"
        />
      </Card>
    </view>
    <view class="mt15px">
      <Card title="基本信息" subTitle="类型">
        <van-radio-group :value="radio" bind:change="onChange">
          <van-cell title="人员考勤" clickable data-name="1">
            <van-radio slot="right-icon" name="1" />
          </van-cell>
          <van-cell title="机械票据" clickable data-name="2">
            <van-radio slot="right-icon" name="2" />
          </van-cell>
          <van-cell title="材料小票" clickable data-name="3">
            <van-radio slot="right-icon" name="3" />
          </van-cell>
        </van-radio-group>
        <van-field
          :value="remark"
          placeholder="请输入"
          :border="false"
          type="textarea"
          :autosize="{ minHeight: 100, maxHeight: 100 }"
        />
      </Card>
      <van-button type="primary" block>提交</van-button>
    </view>
  </view>
</template>

<script>
import Card from "@/components/card";

export default {
  components: { Card },
  data() {
    return {
      radio: "1",
      remark: "",
      fileList: [],
    };
  },
  methods: {
    handleInput(event) {
      this.radio = event.detail;
    },
    beforeRead(event) {
      const { callback } = event.detail;
      callback(true);
    },
    afterRead(event) {
      const { detail } = event;
      this.fileList.push(detail.file);
    }
  },
};
</script>

<style></style>
